<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col class="box box-pack-start box-align-center">
                <div class="btn tab">
                    <el-input placeholder="搜索" style="margin: 0 5px;" v-model="searchtext">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click.stop="listClass()"></i>
                    </el-input>
                    <el-button class="reset-comfirm-btn" @click="showadd" style="margin-right: 5px;">+添加</el-button>
                    <el-upload class="upload-demo" :action="uploadfileurl" :data="upData" :show-file-list="false" multiple
                        :on-success="success" :before-upload="beforeUpload">
                        <el-button class="reset-comfirm-btn">excel导入</el-button>
                    </el-upload>
                    <el-link :href="mburl" type="primary" style="width: 150px;">下载模板</el-link>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="page.list" height="579" stripe
                    :header-cell-style="{ background: '#F0F1F8', color: '#2F3142' }" border v-loading="loading"
                    element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.1)">
                    <el-table-column label="序号" width="80px" fixed align="center">
                        <template slot-scope="scope">
                            {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="xj" label="学级" width="100" align="center"></el-table-column>
                    <el-table-column prop="grade" label="年级" min-width="100" align="center"></el-table-column>
                    <el-table-column prop="zymc" label="专业" width="300" align="center"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="bjdm" label="班级代码" min-width="220" align="center"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="bjmc" label="班级名称" min-width="120" align="center"
                        :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="数据来源" width="100" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.dataSource == 0">数据中心</span>
                            <span v-if="scope.row.dataSource == 1">Excel导入</span>
                            <span v-if="scope.row.dataSource == 2">平台添加</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="trName" label="带班教师" align="center"></el-table-column> -->
                    <el-table-column label="操作" align="center" width="280" fixed="right">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button size="mini" icon="el-icon-edit" type="primary"
                                    @click="handleEdit(scope.row)"></el-button>
                                <el-button size="mini" icon="el-icon-delete" type="danger"
                                    @click="handleDelete(scope.row)"></el-button>
                                <el-button @click="handleExportStudent(scope.row)">导入已有班级学生</el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="listClass" background layout="prev, pager, next" :total="page.total"
                        :current-page="page.pageNum" hide-on-single-page></el-pagination>
                </el-col>
            </el-col>
        </el-col>

        <el-dialog title="添加班级信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="addform" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="学级" prop="xj">
                    <el-select v-model="form.xj" placeholder="请选择学级" @change="changexj">
                        <el-option v-for="(xj, index) in xjlist" :label="xj" :value="xj" :key="xj"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="zydm">
                    <el-select v-model="form.zydm" placeholder="请选择学级" @change="changezy" filterable>
                        <el-option v-for="(zy, index) in zylist" :label="zy.zymc" :value="zy.zydm"
                            :key="zy.zydm"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称" prop="bjmc">
                    <el-input v-model="form.bjmc" placeholder="请输入班级名称" @input="getbjdm"></el-input>
                </el-form-item>
                <el-form-item label="班级代码" prop="bjdm">
                    <el-input v-model="form.bjdm" placeholder="平台自动生成"></el-input>
                </el-form-item>
                <!-- <el-form-item label="带班教师" prop="trid"> -->
                <el-form-item label="带班教师">
                    <el-select v-model="form.trid" placeholder="请选择带班教师" filterable="" @change="changedbjs">
                        <el-option v-for="(tr, index) in trlist" :label="tr.name + '-' + tr.mobile" :value="tr.id"
                            :key="tr.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addclass">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择班级" :visible.sync="showClass" width="30%">
            <el-form label-width="80px">
                <!-- <el-form-item label="带班教师" prop="trid"> -->
                <el-form-item label="选择班级">
                    <el-select v-model="classid" placeholder="请选择班级">
                        <el-option v-for="(item, index) in classList" :label="item.bjmc" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showClass = false">取 消</el-button>
                <el-button type="primary" @click="exportClass">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="show">
            <!-- <el-form :model="form">
                <el-form-item label="学级">
                    <el-input v-model="form.xj" autocomplete="off"></el-input>
                </el-form-item>
            </el-form> -->
            <!-- <el-form :model="form">
                <el-form-item label="专业">
                    <el-input v-model="form.zymc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form> -->
            <!-- <el-form :model="form">
                <el-form-item label="班级代码">
                    <el-input v-model="form.bjdm" autocomplete="off"></el-input>
                </el-form-item>
            </el-form> -->
            <el-form :model="form">
                <el-form-item label="班级">
                    <el-input v-model="form.bjmc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </el-row>
</template>

<script>
export default {
    data() {
        return {
            showClass:false,
            classid:'',
            fromClassid:'',
            classList:[],
            show: false,
            loading: false,
            mburl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/47170F7F2F9C479BB408F6BF5102D962%E7%8F%AD%E7%BA%A7%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xls?Expires=4785463465&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=6wJlmRJUHdBMl0KYeS0odBzlWbg%3D',
            loginInfo: this.$store.state.loginInfo,
            upData: { schoolid: this.$store.state.schoolId },
            uploadfileurl: this.$url.baseURL + "/dclass/impExcelClass",
            schoolid: this.$store.state.schoolId,
            page: {
                total: 0,
                pageSize: 10,
                pageNum: 1,
                list: []
            },

            searchtext: '',
            dialogVisible: false,
            xjlist: [],
            zylist: [],
            trlist: [],
            user: this.$store.state.loginInfo.user,
            maxRole: this.$store.state.maxRole,
            form: {
                xj: '',
                zydm: '',
                bjmc: '',
                bjdm: '',
                trid: '',
                trname: '',
                trName: '',
                schoolid: this.$store.state.schoolId
            },
            rules: {
                xj: [
                    { required: true, message: '请选择学级', trigger: 'blur' },
                ],
                zydm: [
                    { required: true, message: '请选择专业', trigger: 'blur' },
                ],
                bjmc: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 1, message: '长度在 1个字符以上', trigger: 'blur' }
                ],
                bjdm: [
                    { required: true, message: '班级代码不能为空', trigger: 'blur' },
                    { min: 1, message: '长度在 1个字符以上', trigger: 'blur' }
                ],
                trid: [
                    { required: true, message: '请选择带班教师', trigger: 'blur' },
                ],
            }
        };
    },
    mounted() {
        this.listClass();
        this.getxjlist();
    },
    methods: {
        // 编辑
        handleEdit(item) {
            console.log(item);
            this.show = true;
            // this.UserId = item.id
            // this.form.xj = item.xj
            // this.form.zymc = item.zymc
            // this.form.bjdm = item.bjdm
            // this.form.bjmc = item.bjmc
            this.form = { ...item }
            // console.log(this.form, 'this.formthis.form000')
        },
        // 取消
        cancelEdit() {
            if (this.form.bjmc == '') {
                this.$message.warning('请输入编辑内容！');
                return
            }
            this.show = false
        },

        // 保存
        save() {
            // let url = "/wytv3/class"
            // let params = {
            //     xj: this.form.xj,
            //     zymc: this.form.zymc,
            //     bjdm: this.form.bjdm,
            //     bjmc: this.form.bjmc
            // }
            console.log(this.form, 'this.formthis.form111')
            delete this.form.trName
            delete this.form.bjdm
            delete this.form.dataSource
            delete this.form.xj
            delete this.form.zymc
            // console.log(this.form, 'this.formthis.form222')
            this.$api.wyv3.putUpdateBj(this.form).then(res => {
                // console.log(res, '班级管理/////////')
                if (res.code == '200') {
                    this.$message.success('保存成功！');
                    // 刷新列表
                    this.listClass()
                    this.show = false
                }
            })


            // console.log(params, '///')
            // this.show = false
        },
        listClass(pageNum) {
            this.loading = true;
            let params = {
                schoolid: this.schoolid,
                pageNum: pageNum,
                searchtext: this.searchtext
            };
            this.$api.Admin.listClass(params).then(res => {
                // console.log(res,'listClass////////========')
                this.loading = false;
                if (res.code == '0') {
                    this.page = res.list;
                    // console.log(this.page)
                }
            })
        },
        handleDelete(item) {
            let params = {
                classid: item.id
            };
            this.$confirm('删除班级同时，班级下所有学生会一起删除，确定删除么？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.Admin.delClass(params).then(res => {
                    if (res.code == '0') {
                        this.listClass();
                        this.$message.success('移除成功！');
                    }
                })
            }).catch(() => {
            });
        },
        handleExportStudent(e){
            console.log(e.id);
            this.fromClassid = e.id
            this.showClass = true
            let params = {
                schoolid: this.schoolid,
                pageSize:this.page.total,
            };
            this.$api.Admin.listClass(params).then(res => {
                if (res.code == '0') {
                    this.classList = res.list.list
                }
            })
        },
        //exportClass
        exportClass(){
            if(this.classid ==''){
                return this.$message.warning("请选择班级")
            }
            let params={
                fromClassid:this.fromClassid,
                toClassid:this.classid
            }
            this.$api.wyv3.exportClass(params).then(res => {
                // console.log(res, '班级管理/////////')
                if (res.code == '200') {
                    this.$message.success('导入成功！');
                    // 刷新列表
                    this.listClass()
                    this.showClass = false
                }else{
                    this.$message.error('导入失败！');
                }
            })
        },
        beforeUpload(file) {
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const ext = fileName.substr(index + 1);
            const arr = ["xls", "xlsx"];
            const isOk = arr.includes(ext);
            if (!isOk) {
                this.$message.warning('导入模板应为xls/xlsx格式！');
                return false;
            }
        },
        success(res) {
            if (res.errinfo == "") {
                this.listClass();
                this.$message.success("导入成功")
            } else {
                this.$message.error(res.errinfo)
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        getxjlist() {
            this.$ajax.post('/dclass/getxj').then(res => {
                this.xjlist = res.xjlist
            })
        },
        getzylist() {
            this.$ajax.post('/dzy/list', { schoolid: this.schoolid }).then(res => {
                this.zylist = res.list
            })
        },
        gettrlist() {
            this.$ajax.post('/dteacher/schoolTrList2', { schoolid: this.schoolid }).then(res => {
                this.trlist = res.list
            })
        },
        showadd() {
            this.dialogVisible = true;
            this.getxjlist();
            this.getzylist();
            this.gettrlist();
        },
        changexj(e) {
            this.form.xj = e;
        },
        changezy(e) {
            this.form.zydm = e;
        },
        getbjdm() {
            this.$ajax.post('/dclass/getbjdm', { schoolid: this.schoolid, bjmc: this.form.bjmc }).then(res => {
                this.form.bjdm = res.bjdm;
            })
        },
        addclass() {
            this.$refs['addform'].validate((valid) => {
                if (valid) {
                    this.$ajax.post('/dclass/addclass', this.form).then(res => {
                        if (res.result == 'exist') {
                            this.$message.error('专业代码重复！请修改专业名称或专业代码');
                        } else {
                            this.$message.success('添加成功！');
                            this.form.bjdm = res.bjdm;
                            this.listClass();
                            this.dialogVisible = false;
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        changedbjs(e) {
            let obj = {};
            obj = this.page.list.find((item) => {//这里的userList就是上面遍历的数据源
                return item.id !== e;//筛选出匹配数据
            });
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    position: relative;
    height: 100%;
}

.posa {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
    background-color: #fff;

    h3 {
        font-size: 18px;
    }

    .label {
        display: block;
        width: 76px;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 15px;
        margin-right: 10px;
    }

    .btn {
        display: flex;
    }
}

.tab {
    // padding: 0 85px;
}

.height {
    height: 100%;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.delete-btn {
    display: block;
    padding: 3px 5px;
    width: 64px;
    height: 24px;
    line-height: 24px;
    background: linear-gradient(-13deg, #F97762, #F89F9F);
    border-radius: 12px;
    color: #fff;
}
</style>
